<%@include file="/page/tag.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="${ctp}/QUI/libs/js/jquery.js"></script>
<script type="text/javascript" src="${ctp}/js/qui/language/cn.js"></script>
<script type="text/javascript" src="${ctp}/QUI/libs/js/framework.js"></script>
<link href="${ctp}/QUI/libs/css/import_basic.css" rel="stylesheet"	type="text/css" />
<link href="${ctp}/QUI/libs/skins/lightBlue/style.css" rel="stylesheet" type="text/css" id="theme" themeColor="deepBlue"/>

<!-- 表单验证start -->
<script src="${ctp}/QUI/libs/js/form/validationRule.js" type="text/javascript"></script>
<script src="${ctp}/QUI/libs/js/form/validation.js" type="text/javascript"></script>
<!-- 表单验证end -->

<!-- 树组件start -->
<script type="text/javascript" src="${ctp}/js/qui/ztree.js"></script>
<link type="text/css" rel="stylesheet" href="${ctp}/css/ztree.css"></link>
<!-- 树组件end -->

<!-- 树形下拉框start -->
<script type="text/javascript" src="${ctp}/QUI/libs/js/form/selectTree.js"></script>
<!-- 树形下拉框end -->

<!-- 日期选择框start -->
<script type="text/javascript" src="${ctp}/QUI/libs/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期选择框end -->

<!-- 树形双选器start -->
<%-- <script type="text/javascript" src="${ctp}/QUI/libs/js/form/listerTree.js"></script> --%>
<script type="text/javascript" src="${ctp}/js/qui/listerTree.js"></script>
<!-- 树形双选器end -->

<!--自动提示框start-->
<%-- <script type='text/javascript' src='${ctp}/QUI/libs/js/form/suggestion.js'></script> --%>
<script type='text/javascript' src='${ctp}/QUI/libs/js/form/selectSuggestion.js'></script>
<!--自动提示框end-->

<!--框架必需end-->

<style>
.del_f{
	margin-left: 10px;
}
tr{    height: 16px;}
</style>
</head>
<body>

	<form id="ff" target="frmright" class="" method="post" action="" failAlert="验证未通过">
		<input type="hidden"  name="crmCustomerInfoId"  value="<c:out value="${crmCustomerInfo.crmCustomerInfoId }"/>"/>
		<table class="tableStyle" formMode="line">
			
			<tr>
				<td>名称：</td>
				<td colspan="">
					<input type="text"  name="customerName" style="width: 90%;" class="validate[required]"  value="<c:out value="${crmCustomerInfo.customerName }"/>"/>
				</td>
				
				<td>联系电话：</td>
				<td colspan="">
					<input type="text"  name="customerPhone" style="width: 90%;" class="validate[required]"  value="<c:out value="${crmCustomerInfo.customerPhone }"/>"/>
				</td>
				
				<td>年龄：</td>
				<td colspan="">
					<input type="text"  name="customerAge" style="width: 40%;" class=""  value="<c:out value="${crmCustomerInfo.customerAge }"/>"/>
				</td>
			</tr>
			
			<tr>
				<td >地区：</td>
				<td colspan="5">
					<div style="display: inline-block;">
						<div  class="selectSuggestion" style="margin-right:20px;" id="targetProvince" prompt="请选择省" autoCheck="true" name="targetProvince" keepDefaultStyle="true" selectedValue="<c:out value="${crmCustomerInfo.targetProvince }"/>"></div >
					</div>
					<div style="display: inline-block;">
						<div  class="selectSuggestion" style="margin-right:20px;" id="targetCity" prompt="请选择市" autoCheck="true" name="targetCity"  selectedValue="<c:out value="${crmCustomerInfo.targetCity }"/>"></div >
					</div>
					<div style="display: inline-block;">
						<div  class="selectSuggestion" style="margin-right:20px;" id="targetArea" prompt="请选择区" autoCheck="true" name="targetArea" selectedValue="<c:out value="${crmCustomerInfo.targetArea }"/>"></div >
					</div>
				</td>
				
			</tr>
			
			<tr>
				<td colspan=""> 详细地址：</td>
				<td colspan="5">
					 <input type="text"  name="targetAddress" style="width: 80%;" class=""  value="<c:out value="${crmCustomerInfo.targetAddress }" />"/>
				</td>
			</tr>
			
			
			<tr>
				<td >联系单位：</td>
				<td colspan="3">
					<input type="text"  name="customerUnit" style="width: 90%;" class=""  value="<c:out value="${crmCustomerInfo.customerUnit }" />"/>
				</td>
				
				<td colspan=""> 排序：</td>
				<td>
					 <input type="text"  name="sortIndex" style="width: 50%;" class="validate[required]"  value="<c:out value="${crmCustomerInfo.sortIndex }" default="1"/>"/>
				</td>
			</tr>
			
			<tr>
				<td >备注：</td>
				<td colspan="5">
					<textarea name="remark" rows="" cols="" style="width: 80%;"><c:out value="${crmCustomerInfo.remark }" /></textarea>
				</td>
			</tr>
			
			
			
			<tr>
				<td colspan="6">
					<input type="button" value="提交" onclick="submitF()" />
				 	<input type="reset" value="取消" onclick="closeWin()" />
				 </td>
			</tr>
		</table>
	</form>
	<script>
		var provinceArr=new Array(), cityArr=new Array();
		$(function(){
			//获取省数据
			$.ajax({
				url:"${ctp}/sysPosition/sysPosition_list.do?filter_EQS_positionType=province",
				success:function(data){
					var result=data;
					provinceArr.length = 0;
					for(var i in result){
						provinceArr.push({"value":result[i].positionName, "key":result[i].positionName, "index":result[i].positionId, "suggest":result[i].positionName+"|"+result[i].fullPinyin+"|"+result[i].shortPinyin});
					}
					$("#targetProvince").data("data",{"list":provinceArr});
					$("#targetProvince").render();
					
					cleanSelectSuggestion("targetCity");
					cleanSelectSuggestion("targetArea");
					
					var initTargetProvince = $("#targetProvince").attr("relText");
					if(initTargetProvince != '' && initTargetProvince !='请选择省' ){
						getCity(initTargetProvince, function(){
							var initTargetCity = $("#targetCity").attr("relText");
							getPosition(initTargetCity);
						});
					}
					
				}
			});	
			
			//验证省
			$("#targetProvince").bind("validate",function(e,value){
				if(value == '请选择省'){
					cleanSelectSuggestion("targetCity");
					cleanSelectSuggestion("targetArea");
				}
		    });
			
			//选择省后，获取市数据
			$(" #targetProvince").bind("listSelect",function(e,obj){
				getCity(obj.relValue);
		    });
			
		    //选择市后，获取区数据
			$(" #targetCity").bind("listSelect",function(e,obj){
				getPosition(obj.relValue);
		    });

			//验证省
			$("#targetCity").bind("validate",function(e,value){
				if(value == '请选择市'){
					cleanSelectSuggestion("targetArea");
				}
		    });

		});
	
		function cleanSelectSuggestion(id){
			$("#"+id).data("data",{"list":[]});
			$("#"+id).render();
		}
		
		function getArrIndex(arr, name){
			for(var i in arr){
				if(arr[i].value ==name){
					return arr[i].index;
				}
			}
			return undefined;
		}
	
		function closeWin() {
			top.Dialog.close();
		}

		function submitF() {
			  if($("#ff").validationEngine({returnIsValid: true})){
			 	$.ajax({
					url : "${ctp}/crmCustomerInfo/crmCustomerInfo_edit.do",
					type : "post",
					data : $("#ff").serialize(),
					success : function(data) {
						var popBox = new top.Dialog({
							Width:300,
	       					Height:110
						});
						if (data.result) {
							popBox.Title = data.msg;
							popBox.InnerHtml = '<table height="100%" border="0" align="center" cellpadding="10" cellspacing="0">\
										<tr><td align="right"><input type="button" id="Icon_' + this.ID + '" class="icon_alert" align="absmiddle"></td>\
											<td align="left" id="Message_' + this.ID + '" style="font-size:' + (popBox.defaultFontSize) + 'px;font-family:' + (popBox.defaultFontFamily) + '">' + data.msg + '</td></tr>\
									</table>';
							popBox.ShowCloseButton = false;
							popBox.ShowCancelButton = false;
							
							popBox.OKEvent = function() {
								popBox.close();
								top.frmright.reflushList();
								top.Dialog.close();
							};
							popBox.show();
							popBox.okButton.parentNode.style.textAlign = "center";
						} else {
							top.Dialog.alert(data.msg, null, null, null, 2);
						};
					}
				});
			 };
		}
		
		function getPosition(relValue){
			var id = getArrIndex(cityArr, relValue);
			$.ajax({
				url:"${ctp}/sysPosition/sysPosition_list.do?filter_EQS_sysPosition.positionId="+id,
				success:function(data){
					var arr = new Array(), result=data;
					for(var i in result){
						arr.push({"value":result[i].positionName, "key":result[i].positionName, "index":result[i].positionId, "suggest":result[i].positionName+"|"+result[i].fullPinyin+"|"+result[i].shortPinyin});
					}
					$("#targetArea").data("data",{"list":arr});
					$("#targetArea").render();
				}
			});
		}
		
		function getCity(relValue, fun){
			var id = getArrIndex(provinceArr, relValue);
			$.ajax({
				url:"${ctp}/sysPosition/sysPosition_list.do?filter_EQS_sysPosition.positionId="+id,
				success:function(data){
					var result=data;
					cityArr.length = 0;
					for(var i in result){
						cityArr.push({"value":result[i].positionName, "key":result[i].positionName, "index":result[i].positionId, "suggest":result[i].positionName+"|"+result[i].fullPinyin+"|"+result[i].shortPinyin});
					}
					$("#targetCity").data("data",{"list":cityArr});
					$("#targetCity").render();
					
					if(fun){
						fun();
					}
				}
			});
		}
		
		
	</script>
</body>
</html>

